منذ عام تقريبا اطلقت جوجل ادسنس الوحدات الاعلانية المستجيبة لمدونات بلوجر و المواقع المتوافقة مع جميع الشاشات. سابقا كانت الإعلانات متزامنة و ذات حجم ثابت مما أدى إلى بطىء في وقت تحميل صفحة المدونة ولكن الآن اصبح يوجد وحدات إعلانية مستجيبة و متوافقة مع الشاشات و يوجد خيار غير متزامنة و هذا يعني أنها سوف تكون طريقة تحميل الإعلانات بسلاسة تامة دون أن تؤثر على عناصر أخرى من تحميل صفحة المدونة او الموقع الخاص بك, و هذا يقلل كثيرا من وقت تحميل المدونة. ولكن هناك مشكلة ايضا في الوحدات الإعلانية المستجيبة و هو أن معظم المدونين وجدو صعوبة في عرض الوضع الغير متزامن على مدونات بلوجر الخاصة بهم. و بالنسبة للعديد من مستخدمين الإعلانات المستجيبة تظهر لهم مساحات فارغة أو يعطي خطأ على وحدة المتصفح.
العديد من مستخدمين بلوجر قامو بإرسال رسائل لنا عبر نموذج الاتصال الخاص بمدون محترف يسئلون عن كيف يمكننا إظهار الوحدات الإعلانية المستجيبة على مواقعنا لذلك قررنا مشاركة متابعينا الحل الذي سوف يساعد في عرض إعلانات جوجل ادسنس AdSense المستجيبة في المدونات لتجنب وجود المساحات الفارغة (أي الإعلان لن يتم عرضه) و سوف نتعلم أيضا كيفية إخفاء إعلانات ادسنس بإستخدام display:none لعرض إعلانات جوجل الغير متزامنة بشكل افضل على بلوجر.
لماذا ينبغي عليك إستخدام وحدات الإعلان المستجيبة؟
الإعلانات المستجيبة تماما مثل تصميم المواقع الإلكترونية و قوالب بلوجر المتوافقة مع الشاشات فيتغير حجمها وفقا لخصائص حجم الشاشة التي يتم عرض الموقع او القالب عليها كذلك الإعلانات المستجيبة :) تسمح لك التحكم بحجم الإعلانات على الصفحة الخاصة بك. بحيث سوف يتوافق حجم الإعلان مع اجهزة ايفون iPhone ,سامسونج Samsung ,تابلت Tablet ,ايباد iPad. ايضا يمكنك التحكم بظهور او اخفاء الإعلانات على مقاس الشاشة التي تريدها.
فيما يلي أسباب لماذا يجب عليك إستخدام وحدات الإعلان المستجيبة :
1. تحميل الإعلانات بشكل غير متزامن, قد يؤدي إلى جعل تحميل صفحات المدونة او موقع الويب الخاص بك بشكل أسرع بدلا من اكواد ادسنس القديمة التي تقوم بتبطيء تحميل صفحة الويب الخاصة بك.
2. تحجيم تلقائي استنادا على المساحة المتاحة, هذه الميزة تقوم بعرض الإعلانات للزائرين بشكل عالي الدقة و بالتالي زيادة نسبة النقر إلى الظهور بشكل عام. بحيث سوف تظهر الإعلانات بشكل مناسب على الشاشات الصغيرة مثل الهواتف النقالة.
3. يمكنك الآن إخفاء الإعلانات! الآن جوجل تتيح للمستخدمين استخدام display:none في اكواد CSS لإخفاء الوحدات الإعلانية. هذه الميزة متوفرة فقط في الوحدات الإعلانية المستجيبة.
4. Mobilegeddonالجميع سمع بهذه الخوارزمية التي طرحتها جوجل منذ مدة قليلة و التي تقوم بمعاقة المواقع او المدونات الغير متوافقة مع الشاشات و التي تكون بطيئة. لذلك مع إستخدام هذه الوحدات بدلا من القديمة سوف يصبح تحميل الإعلانات أسرع, و بالتالي توفير واجهة أفضل للمستخدم.
العيب الوحيد في إعلانات ادسنس Adsense المستجيبة إنه لا يتغير الحجم إلا بعد إعادة تحميل الصفحة. لذلك سوف يتم عرض الإعلان بنفس حجمه في كل المقاسات و لظهور الإعلانات داخل القالب بشكل جيد يمكنك إستخدام محول الاكواد الخاص بمدون محترف لتحويل اكواد إعلانات ادسنس.
طريقة إنشاء وحدة إعلانية مستجيبة
سوف نقوم بإنشاء وحدة إعلانية بالطريقة المعتادة:
1. تذهب إلى حسابك في AdSense
2. انقر علامة تبويب إعلاناتي
3.انقر على "وحدة إعلانية جديدة"
4. قم بأختيار اول وحدة إعلانية
5. ملء التفاصيل الأخرى وانقر فوق حفظ والحصول على الشفرة الإعلانية.
سوف تكون الشفرة الإعلانية على هذا الشكل
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5679872456940800"
data-ad-slot="4890310675"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
من الشفرة الإعلانية التي فوق سوف نحتاج فقط البيانات الخاصة و هما data-ad-slot و data-ad-slot كما هو موضح بالخط العريض في الكود فوق. الان قم بنسخ الرقمين من كود ادسنس و ضعهم داخل مفكرة لأننا سوف نحتاج إليهم في وقت لاحق.
إضافة الوحدات الإعلانية المستجيبة في ادوات بلوجر
إذا كنت ترغب في إضافة وحدة الإعلان الخاصة بادسنس AdSense من التخطيط في الشريط الجانبي "سايدبار" اتبع الخطوات التالية :
2. انقر على تخطيط
3. الان انقر على "إضافة أداة"
4. قم بإختيار HTML/JavaScript
5. قم بلصق الكود التالي داخل الاداة
<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }
@media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
@media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="xxxxxxx"
data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
التغييرات التي يجب إجرائها
تغيير 300px و هي حجم عرض الوحدة الإعلانية الخاصة بك. إذا كان الشريط الجانبي الخاص بك عرضه 400px فيجب تغيير الرقم 300px إلى 400px و إذا كنت تريد عرض الإعلانات في الهيدر او الفوتر يمكنك تغيير الرقم إلى الحجم الذي يناسبك بحيث لا يتعدى 800px حجم الإعلان.
إستبدل xxxxxxx مع data-ad-client و هو الرقم الموجود داخل المفكرة الخاص بالشفرة الإعلانية.
استبدال xxxxxx مع data-ad-slot هو الرقم الموجود داخل المفكرة الخاص بالشفرة الإعلانية.
5. قم بالضغط على حفظ!
الكود الذي فوق يقوم بعرض الإعلان باحجام مختلفة مثل ليدربورد و المربعات و المستطيلات لأحجام صغيرة ,متوسطة ,كبيرة و هذا يكون على حسب حجم شاشة الجهاز التي يتم عرض الموقع الخاص بك عليها.
بحيث سوف يقوم الكود فوق بعرض إعلانات ادسنس بشكل افضل في الشريط الجانبي الخاص بالمدونة. و تم عمل اختبار على الكود و الجدول التاي يوضح مدى اهمية اضافة الإعلانات المستجيبة.
ماذا لو اردنا إضافة المزيد من الوحدات الإعلانية ؟
إذا كنت ترغب في إضافة وحدة إعلانية اخرى في الشريط الجانبي الخاص بك, يمكنك إستخدام نفس الكود ولكن يجب عليك القيام بتغيير طفيف.هنا يجب عليك تغيير adslot_1 بـ adslot_2 سوف تجدها مكررة اكثر من مرة غيرها كلها. و لإضافة وحدة ثالثة استبدا adslot_1 بـ adslot_3 .... إلخ
الان نريد إضافة وحدات إعلانية داخل القالب؟
لإضافة الإعلانات المستجيبة داخل القالب تحتاج إلى إجراء بعض التعديلات الطفيفة على الكود في الأعلى. و ذلك يكون عبر ترميز شفرة جافا سكريبت و انا قمت بذلك بدلا عنكم و اصبح الكود جاهز. و تحتاج إلى إستخدام الكود التالي بدلا من السابق:<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }
@media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
@media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="xxxxxxx"
data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
الكود الملون بالاصفر هو كود الجافا سكريبت الذي قمنا بترميزه "تحويله". و قمنا بعمل بعض التغييرات في الكود لتسطيع وضعه داخل القالب الان كل ما عليك فعله هو عمل التغييرات مثل الكود السابق, و تمتع بالارباح من خلال بلوجر بفضل إعلانات جوجل ادسنس المتسجيبة! اي سؤال او استفسار لا تترد بوضع تعليق
ملاحظة : قم بتصغير صفحة المتصفح و
عمل رفرش لصفحة مدون محترف سوف تجد حجم إعلانات ادسنس تغير على حسب حجم
الشاشة فعندما يقوم شخص بفتح مدونتنا من اي هاتف ذكي سوف يجد حجم إعلانات
ادسنس مناسبة لشاشته و هذا قد يوفر فرص اكبر للربح من ادسنس
